*{box-sizing: border-box;}
html
body {
    --border-radius: 600px;
    --blue: #7992FF;
    --darkblue:#1C47FF;
    --orange: #FF6600;
    --green: #F2FFD5;
    --black: #202020;
    --darkgrey: #3F3F3F;
    --gutter: 3.125vw 4.5vw;

    margin: 0;
    padding: 0;
    background: #AFAFAF;
    color: var(--darkgrey);
    font-size: 20px;
    font-family: 'Syne', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;}

main {margin-top: 100px;}

h1 {font-size: 80px;
    margin: 0px;}

h2 {font-size: 60px;
    margin: 0px;}

a {color: var(--darkgrey);
    text-decoration: none;}

section {position: relative;
    display: flex;
    width: 100%;
    height: calc(100vh - 100px);
    top: 100px;
    z-index: 2;}

section.sticky {position: sticky;
                margin-top: 100px;
                margin-bottom: 0px;}

section.full-screen {
    height: 100vh;
    top: 0;
    margin-top: 0;
    z-index: 3;}

    /* navigation */

nav {position: fixed;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
    font-size: 20px;
    z-index: 9999;
    background-color: var(--background);}

nav ul {display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;}

nav ul li {list-style: none;
    margin-left: 45px;}

nav ul li a {color: var(--black);
    font-family: 'Doto', sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings: "ROND" 100;
    font-size: 40px;
    flex: 1;
    display: flex;
    flex-direction: column;
    flex-basis: 10vw;}

nav ul li a:hover {
    color: var(--darkblue);
    background-color:var(--background);
    padding: 10px 15px;
    border-radius: 5px;}

    /* about section */

section.about .empty {
    flex-basis: 37.5vw;
    background: repeating-conic-gradient(var(--green), var(--orange) 15%, var(--green) 35%);
    border-radius: 0% 30% 10% 70%;
    transition: flex-basis 1s cubic-bezier(0, 0.9, 0.4, 1);
    max-width: 50vw;}

section.about article {
    flex: 1;
    display: flex;
    flex-direction: column;}

section.about article .title {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--green);
    background: var(--blue);
    border-radius: 10% 70% 0% 30%;
    padding: var(--gutter);
    font-family: "Bodoni Moda", serif;
    font-optical-sizing: auto;
    font-style: normal;
    transition: flex-basis 1s cubic-bezier(0, 0.9, 0.4, 1);}

section.about article .description {
    flex: 1;
    display: flex;
    align-items: center;
    color: var(--darkgrey);
    background: var(--green);
    border-radius: 30% 0% 70% 10%;
    padding: 10vw;
    max-height: 20vw;
    transition: flex-basis 1s cubic-bezier(0, 0.9, 0.4, 1);}

    /* home section */

section.home article {
    display: flex;
    width: 100%;}

section.home figure {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-basis: 50.25vw;
    margin: 0;
    background: var(--blue);
    border-radius: var(--border-radius);}

section.home figure img {
    width: 70%;}

section.home .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    background: var(--black);
    color: #E5E5E5;
    padding: var(--gutter);
    border-radius: var(--border-radius);}

section.home .text a {
    font-family: "Bodoni Moda", monospace;}

html {
  scroll-behavior: smooth;
}

/* home section animations */

section.home.home-service figure img {
    animation-name: rotate;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.77,.28,.42,.93);}

section.home.home-mywork figure img {
    animation-name: rotate;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-direction: left;
    animation-timing-function: cubic-bezier(.50,.50,.50,.50);}

section.home.home-contact figure img {
    animation-name: bounce;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: cubic-bezier(.77,.28,.42,.93);}
    
    @keyframes float {
    0% {transform: translateY(-5%);}
    100% {transform: translateY(5%);}}
    @keyframes rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}}
    @keyframes bounce {
    0% {transform: translateX(-10%);}
    100% {transform: translateX(10%);}}

/* home section overrides */

section.home.home-service figure {
    background: var(--green);}

section.home.home-service .text h2,
section.home.home-service .text a {
    color: var(--green);
    font-family: "Bodoni Moda", serif;}
    

section.home.home-mywork figure {
    background: var(--blue);
    font-family: "Bodoni Moda", serif;}

section.home.home-mywork .text h2,
section.home.home-mywork .text a {
    color: var(--blue);
    font-family: "Bodoni Moda", serif;}

section.home.home-contact figure {
    background: var(--green);}

section.home.home-contact .text h2,
section.home.home-contact .text a {
    color: var(--green);
    font-family: "Bodoni Moda", serif;}

/* email section */

section.email {
    align-items: end;
    justify-content: center;
    background: linear-gradient(var(--darkblue), var(--orange) 60%, var(--blue) 70%, var(--green));
    border-radius: var(--border-radius);
    mix-blend-mode:difference;
    margin-bottom: 1%;
    margin-top: 30%;
    top: 100px}

section.email a {
    font-size: 30px;
    color: #000000;
    font-family: "Bodoni Moda", serif;
    font-weight: bold;
    margin-bottom:5%;
    will-change: filter;}

section.email a:hover {
    filter: blur(1px);
    color: pink;}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 768px) {

html, body {font-size:16px; --border-radius:80px; --gutter:6vw;}
main {margin-top:80px;}
h1 {font-size: 42px;}
h2 {font-size: clamp(28px, 8vw, 36px);}

/* NAV */
nav {height:80px;}
nav ul {justify-content:space-around;}
nav ul li {margin-left:0;}
nav ul li a {font-size:20px; flex-basis:auto; padding:8px 10px;}
nav ul li a:hover {padding:8px 10px;}

/* SECTIONS */
section {flex-direction:column; height:auto; min-height:calc(100vh - 80px); top:80px;}
section.sticky {position:sticky; top:80px;}
section.full-screen {height:100vh;}

/* ABOUT */
section.about {flex-direction:column;}
section.about .empty {flex-basis:auto; height:35vh; max-width:100%; border-radius:0% 40% 20% 60%;}
section.about article {flex:none;}
section.about article .title {min-height:30vh; border-radius:20% 60% 0% 40%; padding:var(--gutter);}
section.about article .description {
  min-height:30vh; max-height:none; padding:var(--gutter);
  font-size:small; line-height:1.4; border-radius:40% 0% 60% 20%;
}

/* HOME */
section.home article {flex-direction:column;}
section.home figure {
  flex-basis:auto; height:40vh;
  border-radius:var(--border-radius) var(--border-radius) 0 0;
}
section.home figure img {width:55%;}
section.home .text {
  border-radius:0 0 var(--border-radius) var(--border-radius);
  padding:0 50px 70px; font-size:small; text-align:center;
}
section.home h2, section.home a {text-align:center;}
section.home .text a:active {opacity:.7;}

/* ANIMATIONS */
section.home.home-service figure img,
section.home.home-mywork figure img,
section.home.home-contact figure img {animation-duration:12s;}

/* EMAIL */
section.email {
  height:70vh; margin:15% 0 5%;
  border-radius:var(--border-radius);
  mix-blend-mode:difference;
  display:flex; justify-content:center; align-items:flex-end;
  overflow:hidden;
}
section.email a {
  font-size:18px; padding-bottom:20%;
  display:inline-block; text-align:center;
  max-width:90%; word-break:break-word; margin:0;
}
section.email a:hover {filter:none;}

}

/* =========================
   NO HOVER DEVICES
   ========================= */
@media (hover:none) {
  a:hover {background:none; filter:none;}
}

/* =========================
   TEXT SAFETY
   ========================= */
body {overflow-x:hidden;}
section, article, figure, nav, nav ul li a,
section > *, article > * {min-width:0;}

h1, h2, p, a {
  overflow-wrap:break-word;
  word-wrap:break-word;
  hyphens:auto;
}

section.home .text,
section.home .text h2,
section.home .text p,
section.home .text a,
section.about article .title,
section.about article .description {
  max-width:100%;
  overflow:hidden;
}

/* NAV TEXT */
nav ul li a {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}